import { triggerFocus } from 'antd/lib/input/Input'
import React, { memo } from 'react'



class MemoDemo extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      data: {
        age: 22,
        name: '小毅'
      }
    }
  }

  describeView() {
    return (
      <div>
        React.memo和PureComponent作用类似，可以用作性能优化，React.memo 是高阶组件，函数组件和类组件都可以使用， 和区别PureComponent是 React.memo只能对props的情况确定是否渲染，而PureComponent是针对props和state。
        React.memo 接受两个参数，第一个参数原始组件本身，第二个参数，可以根据一次更新中props是否相同决定原始组件是否重新渲染。是一个返回布尔值，true 证明组件无须重新渲染，false证明组件需要重新渲染，这个和类组件中的shouldComponentUpdate()正好相反 。
        <b>
          <p> React.memo: 第二个参数 返回 true 组件不渲染 ， 返回 false 组件重新渲染。</p>
          <p> shouldComponentUpdate: 返回 true 组件渲染 ， 返F回 false 组件不渲染。</p>
        </b>
      </div>
    )
  }



  changeAge = () => {
    const { data } = this.state
    data.age++
    this.setState({
      data
    })
  }

  render() {
    const { data } = this.state


    const TextMemo = function (props) {
      // console.log("子组件渲染", props)
      if (props) return <div>hello,world</div>
    }

    const constrolIsRender = (pre, next) => {
      if (pre.number === next.number) { // number 不改变 ，不渲染组件
        return true
      } else if (pre.number !== next.number && next.number > 25) { // number 改变 ，但值大于5 ， 不渲染组件
        return true
      } else { // 否则渲染组件
        return false
      }
    }

    const NewTexMemo = memo(TextMemo, constrolIsRender)

    return (
      <div>
        <h2>3、memo</h2>
        <h4>{data.name}</h4>
        <h4>age:{data.age}</h4>
        <button onClick={this.changeAge}>age ++</button>
        <NewTexMemo number={data.age}>
          <p>aa</p>
          <p>bb</p>
          <p>cc</p>
        </NewTexMemo>
        {this.describeView()}
      </div>
    )
  }



}

export default MemoDemo